<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% String path=pageContext.getServletContext().getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>角色管理</title>
	<link rel="stylesheet" type="text/css" href="<%=path %>/eazyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=path %>/eazyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=path %>/eazyui/demo/demo.css">
	<script type="text/javascript" src="<%=path %>/eazyui/jquery.min.js"></script>
	<script type="text/javascript" src="<%=path %>/eazyui/jquery.easyui.min.js"></script>
	<style type="text/css">
	a{ color:#999; text-decoration:none;}
		a:hover{ text-decoration:underline;}
	#content{
		width:90%;
		padding:10px;
		margin:0 auto;
	}
	
	
	</style>
	<script type="text/javascript">

	function addMenu(){
		
		var menuId = $("#menuId").val();
		var menuName = $("#menuName").val();
		var parentId = $("#editparentId").combobox('getValue')
		var menuUrl = $("#menuUrl").val();
		$.ajax({
			url:"<%=path %>/menus/insertMenu",
			data:{menuId:menuId,menuName:menuName,parentId:parentId,menuUrl:menuUrl},
			/*dataType:"json",*/
			success:function(data,textStatus){
				if(textStatus=="success"){
					
					if(data==true){
						alert("添加成功");
						
						$('#dg').datagrid('appendRow',{
							menuId:menuId,
							menuName:menuName,
							parentId:parentId,
							menuUrl:menuUrl,
						});
						onLoadSuccess();
						$('#add').window("close");
					}
				}
			},
			error:function(data,textStatus){
				alert("error:"+textStatus);
			},
		})
		
	}
	function deleteMenu(menuId,index){
		
		$.ajax({
			url:"<%=path %>/menus/deleteMenu",
			data:{menuId:menuId},
			/*dataType:"json",*/
			success:function(data,textStatus){
				if(textStatus=="success"){
					
					if(data==true){
						alert("删除成功");
						
						$('#dg').datagrid('deleteRow',index);
						var rows = $('#dg').datagrid("getRows");
						$("#dg").datagrid("loadData",rows);
					}
				}
			},
			error:function(data,textStatus){
				alert("error:"+textStatus);
			},
		})
	}
	function onLoadSuccess(){
		$("a[name='editbtn']").linkbutton({
			plain:true,
		    iconCls: 'icon-edit'
		});
		$("a[name='removebtn']").linkbutton({
			plain:true,
		    iconCls: 'icon-remove'
		});
	}
	function formatterBtn(value,row,index){
		var str ='<a href="#" name="editbtn" class="easyui-linkbutton" title="修改角色信息" onclick="editMenu(&quot;'+row.menuId+'&quot;,'+index+');">修改</a> &nbsp;&nbsp;'
		  +'<a href="#" name="removebtn" class="easyui-linkbutton" title="删除角色信息" onclick="deleteMenu(&quot;'+row.menuId+'&quot;,'+index+');" >删除</a>';
		return str;
			
	}
	function editMenu(menuId,index){
		$("#edit").window("open");
		if(menuId!=""){
			$.get("<%=path %>/menus/getMenuByMenuId",{menuId:menuId},function(data,textStatus){

				$("#editmenuId").textbox("setValue",data.menuId);
				$("#editmenuName").textbox("setValue",data.menuName);
				$("#editparentId").combobox("setValue",data.parentId);
				$("#editmenuUrl").textbox("setValue",data.menuUrl);
				$("#editIndex").val(index);				
			})			
		}
	}
	function saveMenu(){
		
		var menuId = $("#editmenuId").textbox("getValue");
		var menuName=$("#editmenuName").textbox("getValue");
		var parentId = $("#editparentId").combobox('getValue')
		var menuUrl = $("#editmenuUrl").textbox("getValue");
		var index =$("#editIndex").val();
		alert(index);
		$.post("<%=path %>/menus/editMenu",{menuId:menuId,menuName:menuName,parentId:parentId,menuUrl:menuUrl},function(data,textStatus){
			
			
			if(data==true){
				alert("修改成功");
				$('#edit').window("close");
				$('#dg').datagrid('updateRow',{
					index:index,
					row:{
						menuId:menuId,
						menuName:menuName,
						parentId:parentId,
						menuUrl:menuUrl,
					}
			});
			onLoadSuccess();
		}
	})
	}
	
	</script>
</head>
<body>
<div id="content">
	<table id="dg" class="easyui-datagrid" style="width: 100%" data-options="onLoadSuccess:onLoadSuccess">
    <thead>
		<tr>
			<th field="menuId" width=5%></th>
			<th field="menuName" width="25%">菜单名称</th>
			<th field="parentId" width="5%">父菜单</th>
			<th field="menuUrl" width="25%">菜单url</th>
			<th data-options="field:'action',formatter:formatterBtn" width="40%">操作</th>
		</tr>
    </thead>
    <tbody>
    <c:forEach items="${menuList }" var="menu">
    	<tr>
			<td>${menu.menuId }</td>
			<td>${menu.menuName }</td>
			<td>${menu.parentId }</td>
			<td>${menu.menuUrl }</td>
		</tr>
			<c:forEach items="${menu.childrenMenuList }" var="children">
				<tr>
					<td>${children.menuId }</td>
					<td>${children.menuName }</td>
					<td>${children.parentId }</td>
					<td>${children.menuUrl }</td>
				</tr>
			</c:forEach>
	</c:forEach>
		
	</tbody>
</table>
<div style="padding:20px 0;">
		<a href="#" class="easyui-linkbutton" title="添加角色信息"  data-options="iconCls:'icon-add'" onclick="$('#add').window('open')">添加用户信息</a>
	</div>
	<div id="add" class="easyui-window" title="添加角色信息" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:500px;height:300px;padding:10px;">
		<div style="margin:0 auto;width:60%;">
			<div style="margin:5px auto;">
				<div>菜单id:</div>
				<input class="easyui-textbox" id="menuId" style="width:100%;height:25px">
			</div>
			<div style="margin:5px auto;">
				<div>菜单名称:</div>
				<input class="easyui-textbox" id="menuName" style="width:100%;height:25px">
			</div>
			<div style="margin:5px auto;">
				<div>父菜单:</div>
				<select class="easyui-combobox" style="width:100%;height:32px;" id="parentId">
						<c:forEach items="${menuList }" var="menu" >
							<option value="${menu.menuId }">${menu.menuName }</option>
						</c:forEach>
							<option value="0">无父菜单</option>
				</select>
			</div>
			<div style="margin:5px auto;">
				<div>菜单url:</div>
				<input class="easyui-textbox" id="menuUrl" style="width:100%;height:25px">
			</div>
			<div style="margin-top:10px">
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px" onclick="addMenu();">添加</a>
			</div>
		
		</div>
</div>

<div id="edit" class="easyui-window" title="修改角色信息" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:500px;height:300px;padding:10px;">
		<div style="margin:0 auto;width:60%;">
			
			<div style="margin:5px auto;">
				<input id="editIndex" type="hidden">
				<div>菜单id:</div>
				<input id="editmenuId" class="easyui-textbox" readonly="readonly">
				<div>菜单名称:</div>
				<input class="easyui-textbox" id="editmenuName" style="width:100%;height:25px">
				<div style="margin:5px auto;">
				<div>父菜单:</div>
					<select class="easyui-combobox" style="width:100%;height:32px;" id="editparentId">
						<c:forEach items="${menuList }" var="menu">
							<option value="${menu.menuId }">${menu.menuName }</option>
						</c:forEach>
							<option value="0">无父菜单</option>
				</select>
				</div>
				<div style="margin:5px auto;">
				<div>菜单url:</div>
				<input class="easyui-textbox" id="editmenuUrl" style="width:100%;height:25px">
				</div>
			</div>
			
			<div style="margin-top:10px">
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px" onclick="saveMenu();">修改</a>
			</div>
		
		</div>
</div>
</body>
</html>